<template>
	<view class="content">
		<u-navbar :placeholder='true' title="选择关联商品" height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>

		<view class="select_search">
			<u-search bgColor="#fff" :actionStyle="actionStyle" placeholder-color="#777777" color="#333332"
				search-icon-color="#777777" @custom="search" placeholder="请输入商品名称" v-model="keyword"></u-search>
		</view>
		<view class="select_goods_list">
			<template v-for="(item,index) in list1">
				<view class="select_item" :key="index" @click="selectGoods(item.id)">
					<relevance-goods :item="item" :oldprice='true'></relevance-goods>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getCommodity
	} from '../../api/index.js'
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				actionStyle: {
					color: '#FF594D',
					'font-size': '26rpx',
				},
				keyword: "",
				list1: []
			}
		},
		created() {
			this.getCommodityData({
				commodityType: 3,
				// commodityName: '茶'
			})
		},
		methods: {
			selectGoods(id) {
				console.log(id);
				this.$store.commit('setCircleGoods', id)
				console.log(this.$store.state.circleGoods);
				uni.navigateBack()
			},
			async getCommodityData(data) {
				const res = await getCommodity(data)
				console.log(res);
				this.list1 = res.rows
			},
			search(value) {
				console.log(value);
				this.getCommodityData({
					commodityType: 3,
					commodityName: value
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		height: 100vh;

		.select_search {
			padding: 30rpx 20rpx;
		}

		.select_goods_list {
			.select_item {
				background-color: #fff;
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>